// 价格分析

//颜色
let colors = ['#0df1de', '#2fe6fc', '#6291f2', '#2861d6', '#0a29be', '#400dc0', '#791c97', '#d0630a', '#f2ec3b', '#25c379']

function buildChart1() {
  let salesDate = ['08-22', '08-23', '08-24', '08-25', '08-26', '08-26', '08-28']
  let passengerFlow = [2480, 2490, 2481, 2490, 2480, 2580, 2410]
  let yearOnYear = [1.2, 1.0, 1.2, 1, 1.2, 1.4, 1.2]
  let ringRatio = [1.1, 1.0, 1.0, 1.2, 1.2, 1.2, 1.4]
  var myChart = echarts.init(document.getElementById('price'));
  option = {
    tooltip: {
      trigger: 'axis',
    },
    grid: {
      top: '20%',
      left: '0',
      right: '0',
      bottom: '8%',
      containLabel: true,
    },
    legend: {
      itemGap: 50,
      data: ['销量', '同比增长率', '环比增长率'],
      right: "10%",
      textStyle: {
        color: '#fff',
      },
      itemWidth: 20,
      itemHeight: 10,
    },
    xAxis: [{
      type: 'category',
      boundaryGap: true,
      axisLine: { //坐标轴轴线相关设置。数学上的x轴
        show: true,
        lineStyle: {
          color: '#999'
        },
      },
      axisLabel: { //坐标轴刻度标签的相关设置
        textStyle: {
          color: '#d1e6eb',
          margin: 15,
        },
      },
      axisTick: {
        show: false,
      },
      data: salesDate,
    }],
    yAxis: [
      {
        nameTextStyle: {
          color: "#ccc"
        },
        type: 'value',
        splitLine: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#999'
          },
        },
        axisLabel: {
          margin: 10,
          textStyle: {
            color: '#d1e6eb',

          },
        },
        axisTick: {
          show: false,
        },
      },
      {
        type: 'value',
        splitLine: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#999'
          },
        },
        axisLabel: {
          margin: 10,
          textStyle: {
            color: '#d1e6eb',

          },
          formatter: '{value} %',
          textStyle: {
            color: '#fff',
            fontSize: 12, //坐标值得具体的颜色
          }
        },
        axisTick: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: '销量',
        type: 'bar',
        barMaxWidth: 16,
        tooltip: {
          show: true
        },
        label: {
          show: false,
          position: 'top',
          textStyle: {
            color: '#fff',
          }
        },
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgb(47,230,252)'
            },
              {
                offset: 1,
                color: 'rgb(40,97,214)'
              }
            ], false),
            // color: function(params) {
            //     var colorList = ['#0ec1ff', '#10cdff', '#12daff', '#15ebff', '#17f8ff', '#1cfffb', '#1dfff1'];
            //     return colorList[params.dataIndex];
            // }
          }
        },
        data: passengerFlow
      },
      {
        name: '同比增长率',
        type: 'line',
        yAxisIndex: 1,
        symbol: 'none',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0,  0,1, [{
              offset: 0,
              color: 'rgba(13,241,222,0.6)'
            }, {
              offset: 0.3,
              color: 'rgba(13,241,222,0)'
            }, {
              offset: 1,
              color: 'rgba(13,241,222,0)'
            }], false),
          }
        },
        itemStyle: {
          color: "#407FFF"
        },
        data: yearOnYear
      },
      {
        name: '环比增长率',
        type: 'line',
        yAxisIndex: 1,
        smooth: true,
        symbol: 'none',
        symbolSize: 5,
        showSymbol: false,
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(208,99,10,0.6)'
            }, {
              offset: 0.3,
              color: 'rgba(208,99,10,0)'
            }, {
              offset: 1,
              color: 'rgba(208,99,10,0)'
            }], false),
          },
        },
        itemStyle: {
          color: "rgba(208,99,10,0.6)"
        },
        data: ringRatio
      }
    ]
  };
  myChart.setOption(option);
}

buildChart1()

//7天价格预测
function buildChart2() {
  var myChart = echarts.init(document.getElementById('priceForecast'));
  option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        lineStyle: {
          color: '#57617B'
        }
      }
    },
    legend: {
      itemWidth: 20,
      itemHeight: 10,
      itemGap: 13,
      data: ['今年预测', '去年同期',],
      right: '4%',
      textStyle: {
        fontSize: 12,
        color: '#fff'
      }
    },
    grid: {
      left: '2%',
      right: '2%',
      bottom: '3%',
      top: "10%",
      containLabel: true
    },
    xAxis: [{
      type: 'category',
      boundaryGap: false,
      axisLine: {
        lineStyle: {
          color: '#DDD'
        }
      },
      data: ['10-01', '10-02', '10-03', '10-04', '10-05', '10-06', '10-07']
    }],
    yAxis: [{
      type: 'value',
      axisTick: {
        show: false
      },
      axisLine: {
        lineStyle: {
          color: '#DDD'
        }
      },
      axisLabel: {
        margin: 5,
        textStyle: {
          fontSize: 14
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'solid',
          color: 'rgba(0,0,0,.1)'
        }
      }
    }],
    series: [{
      name: '今年预测',
      type: 'line',
      symbol: 'none',
      symbol: 'circle',
      symbolSize: 5,
      showSymbol: false,
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0,  0,1,[{
            offset: 0,
            color: 'rgba(13,241,222,0.6)'
          }, {
            offset: 0.3,
            color: 'rgba(13,241,222,0)'
          }, {
            offset: 1,
            color: 'rgba(13,241,222,0)'
          }], false),
        }
      },
      itemStyle: {
        color: "#407FFF"
      },
      data: [1320, 1332, 1329, 1335, 1328, 1326, 1340]
    }, {
      name: '去年同期',
      type: 'line',
      smooth: true,
      symbol: 'none',
      symbolSize: 5,
      showSymbol: false,
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: 'rgba(208,99,10,0.6)'
          }, {
            offset: 0.3,
            color: 'rgba(208,99,10,0)'
          }, {
            offset: 1,
            color: 'rgba(208,99,10,0)'
          }], false),
        },
      },
      itemStyle: {
        color: "rgba(208,99,10,0.6)"
      },
      data: [1205, 1202, 1232, 1214, 1232, 1210, 1203]
    }]
  };
  myChart.setOption(option);
}

buildChart2()

// 价格分析

function buildChart3() {
  let salesDate = ['08-22', '08-23', '08-24', '08-25', '08-26', '08-27', '08-28']
  let productNum = [280, 590, 681, 890, 780, 389, 402]
  var myChart = echarts.init(document.getElementById('product'));
  option = {
    tooltip: {
      trigger: 'axis',
    },
    grid: {
      top: '20%',
      left: '0',
      right: '0',
      bottom: '8%',
      containLabel: true,
    },
    xAxis: [{
      type: 'category',
      boundaryGap: true,
      axisLine: { //坐标轴轴线相关设置。数学上的x轴
        show: true,
        lineStyle: {
          color: '#999'
        },
      },
      axisLabel: { //坐标轴刻度标签的相关设置
        textStyle: {
          color: '#d1e6eb',
          margin: 15,
        },
      },
      axisTick: {
        show: false,
      },
      data: salesDate,
    }],
    yAxis: [
      {
        nameTextStyle: {
          color: "#ccc"
        },
        type: 'value',
        splitLine: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#999'
          },
        },
        axisLabel: {
          margin: 10,
          textStyle: {
            color: '#d1e6eb',

          },
        },
        axisTick: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: '数量',
        smooth: true,
        type:'line',
        symbol: 'none',
        symbolSize: 5,
        showSymbol: false,
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(208,99,10,0.6)'
            }, {
              offset: 0.3,
              color: 'rgba(208,99,10,0)'
            }, {
              offset: 1,
              color: 'rgba(208,99,10,0)'
            }], false),
          },
        },
        itemStyle: {
          color: "rgba(208,99,10,0.6)"
        },
        data: productNum
      },
    ]
  };
  myChart.setOption(option);
}

buildChart3()

//评价分析
function buildChart4() {
  let salesDate = ['08-22', '08-23', '08-24', '08-25', '08-26', '08-26', '08-28']
  let praiseNum = [180, 190, 181, 140, 180, 168, 157]
  let averageNum = [76, 86, 88, 65, 78, 80, 74]
  let badNum = [22, 34, 31, 21, 24, 19, 22]
  let praiseYearonYear = [9, 10, 11, 10, 11, 12, 10]
  let praiseRing = [15, 14, 15, 18, 17, 16, 15]
  var myChart = echarts.init(document.getElementById('evaluation'));
  option = {
    tooltip: {
      trigger: 'axis',
    },
    grid: {
      top: '20%',
      left: '0',
      right: '0',
      bottom: '8%',
      containLabel: true,
    },
    legend: {
      itemWidth: 20,
      itemHeight: 10,
      itemGap: 13,
      data: ['同比增长率', '环比增长率','好评','中评','差评'],
      right: '4%',
      textStyle: {
        fontSize: 12,
        color: '#fff'
      }
    },
    xAxis: [{
      type: 'category',
      boundaryGap: true,
      axisLine: { //坐标轴轴线相关设置。数学上的x轴
        show: true,
        lineStyle: {
          color: '#999'
        },
      },
      axisLabel: { //坐标轴刻度标签的相关设置
        textStyle: {
          color: '#d1e6eb',
          margin: 15,
        },
      },
      axisTick: {
        show: false,
      },
      data: salesDate,
    }],
    yAxis: [
      {
        nameTextStyle: {
          color: "#ccc"
        },
        type: 'value',
        splitLine: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#999'
          },
        },
        axisLabel: {
          margin: 10,
          textStyle: {
            color: '#d1e6eb',

          },
        },
        axisTick: {
          show: false,
        },
      },
      {
        type: 'value',
        splitLine: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#999'
          },
        },
        axisLabel: {
          margin: 10,
          textStyle: {
            color: '#d1e6eb',

          },
          formatter: '{value} %',
          textStyle: {
            color: '#fff',
            fontSize: 12, //坐标值得具体的颜色
          }
        },
        axisTick: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: '好评',
        type: 'bar',
        barMaxWidth: 12,
        label: {
          show: false,
          position: 'top',
          textStyle: {
            color: '#fff',
          }
        },
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgb(47,230,252)'
            },
              {
                offset: 1,
                color: 'rgb(40,97,214)'
              }
            ], false),
            // color: function(params) {
            //     var colorList = ['#0ec1ff', '#10cdff', '#12daff', '#15ebff', '#17f8ff', '#1cfffb', '#1dfff1'];
            //     return colorList[params.dataIndex];
            // }
          }
        },
        data: praiseNum
      },
      {
        name: '中评',
        type: 'bar',
        barMaxWidth: 12,
        label: {
          show: false,
          position: 'top',
          textStyle: {
            color: '#fff',
          }
        },
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgb(98,145,242)'
            },
              {
                offset: 1,
                color: 'rgb(10,41,190)'
              }
            ], false),
            // color: function(params) {
            //     var colorList = ['#0ec1ff', '#10cdff', '#12daff', '#15ebff', '#17f8ff', '#1cfffb', '#1dfff1'];
            //     return colorList[params.dataIndex];
            // }
          }
        },
        data: averageNum
      },
      {
        name: '差评',
        type: 'bar',
        barMaxWidth: 12,
        label: {
          show: false,
          position: 'top',
          textStyle: {
            color: '#fff',
          }
        },
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgb(121,28,151)'
            },
              {
                offset: 1,
                color: 'rgb(64,13,192)'
              }
            ], false),
            // color: function(params) {
            //     var colorList = ['#0ec1ff', '#10cdff', '#12daff', '#15ebff', '#17f8ff', '#1cfffb', '#1dfff1'];
            //     return colorList[params.dataIndex];
            // }
          }
        },
        data: badNum
      },
      {
        name: '环比增长率',
        type: 'line',
        yAxisIndex: 1,
        smooth: true,
        symbol: 'none',
        symbolSize: 5,
        showSymbol: false,
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(208,99,10,0.6)'
            }, {
              offset: 0.3,
              color: 'rgba(208,99,10,0)'
            }, {
              offset: 1,
              color: 'rgba(208,99,10,0)'
            }], false),
          },
        },
        itemStyle: {
          color: "rgba(208,99,10,0.6)"
        },
        data: praiseRing
      },
      {
        name: '同比增长率',
        type: 'line',
        yAxisIndex: 1,
        symbol: 'none',
        smooth: true,
        symbolSize: 5,
        showSymbol: false,
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0,  0,1, [{
              offset: 0,
              color: 'rgba(13,241,222,0.6)'
            }, {
              offset: 0.3,
              color: 'rgba(13,241,222,0)'
            }, {
              offset: 1,
              color: 'rgba(13,241,222,0)'
            }], false),
          }
        },
        itemStyle: {
          color: "#407FFF"
        },
        data: praiseYearonYear
      }
    ]
  };
  myChart.setOption(option);
}

buildChart4()


// 销售渠道分布
function buildChart5() {
  var myChart = echarts.init(document.getElementById('channel'));
  option = {
    color: colors,
    tooltip: {
      trigger: 'item',
      formatter: "{a} <br/>{b}: {c} ({d}%)",
    },
    legend: {
      orient: 'vertical',
      right: '10%',
      y: 'center',
      textStyle: {
        color: "white"
      },
      itemHeight: 10,
      itemWidth: 20,
      data: ['飞猪', '携程', '美团', '官网']
    },
    series: [
      {
        name: '销售渠道分布',
        type: 'pie',
        radius: ['50%', '70%'],
        center: ['40%', '50%'],
        avoidLabelOverlap: false,
        label: {
          normal: {
            show: false,
            position: 'center'
          },
          emphasis: {
            show: true,
            textStyle: {
              fontSize: '30',
              fontWeight: 'bold'
            }
          }
        },
        labelLine: {
          normal: {
            show: false
          }
        },
        data: [
          {value: 335, name: '飞猪'},
          {value: 310, name: '携程'},
          {value: 234, name: '美团'},
          {value: 135, name: '官网'},
        ]
      }
    ]
  };

  myChart.setOption(option);
}

buildChart5()

// 销量分析
function buildChart6() {
  let salesDate = ['08-22', '08-23', '08-24', '08-25', '08-26', '08-27', '08-28']
  let passengerFlow = [480, 490, 481, 490, 480, 470, 474]
  let yearOnYear = [14.0, 12.0, 15.6, -1, 12.1, 1.2, 1.1]
  let ringRatio = [10.1, -1.0, 11.0, 10.5, 11.2, 1.2, 1.2]
  var myChart = echarts.init(document.getElementById('volume'));
  option = {
    tooltip: {
      trigger: 'axis',
    },
    grid: {
      top: '20%',
      left: '0',
      right: '0',
      bottom: '8%',
      containLabel: true,
    },
    legend: {
      itemGap: 50,
      data: ['销量', '同比增长率', '环比增长率'],
      right: "10%",
      textStyle: {
        color: '#fff',
      },
      itemWidth: 20,
      itemHeight: 10,
    },
    xAxis: [{
      type: 'category',
      boundaryGap: true,
      axisLine: { //坐标轴轴线相关设置。数学上的x轴
        show: true,
        lineStyle: {
          color: '#999'
        },
      },
      axisLabel: { //坐标轴刻度标签的相关设置
        textStyle: {
          color: '#d1e6eb',
          margin: 15,
        },
      },
      axisTick: {
        show: false,
      },
      data: salesDate,
    }],
    yAxis: [
      {
        nameTextStyle: {
          color: "#ccc"
        },
        type: 'value',
        splitLine: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#999'
          },
        },
        axisLabel: {
          margin: 10,
          textStyle: {
            color: '#d1e6eb',

          },
        },
        axisTick: {
          show: false,
        },
      },
      {
        type: 'value',
        splitLine: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#999'
          },
        },
        axisLabel: {
          margin: 10,
          textStyle: {
            color: '#d1e6eb',

          },
          formatter: '{value} %',
          textStyle: {
            color: '#fff',
            fontSize: 12, //坐标值得具体的颜色
          }
        },
        axisTick: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: '销量',
        type: 'bar',
        barMaxWidth: 16,
        tooltip: {
          show: true
        },
        label: {
          show: false,
          position: 'top',
          textStyle: {
            color: '#fff',
          }
        },
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#14C6CA'
            },
              {
                offset: 1,
                color: '#407FFF'
              }
            ], false),
            // color: function(params) {
            //     var colorList = ['#0ec1ff', '#10cdff', '#12daff', '#15ebff', '#17f8ff', '#1cfffb', '#1dfff1'];
            //     return colorList[params.dataIndex];
            // }
          }
        },
        data: passengerFlow
      },
      {
        name: '同比增长率',
        type: 'line',
        yAxisIndex: 1,
        symbol: 'none',
        smooth: true,
        symbolSize: 5,
        showSymbol: false,
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0,  0,1, [{
              offset: 0,
              color: 'rgba(13,241,222,0.6)'
            }, {
              offset: 0.3,
              color: 'rgba(13,241,222,0)'
            }, {
              offset: 1,
              color: 'rgba(13,241,222,0)'
            }], false),
          }
        },
        itemStyle: {
          color: "#407FFF"
        },

        data: yearOnYear
      },
      {
        name: '环比增长率',
        type: 'line',
        yAxisIndex: 1,
        smooth: true,
        symbol: 'none',
        symbolSize: 5,
        showSymbol: false,
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(208,99,10,0.6)'
            }, {
              offset: 0.3,
              color: 'rgba(208,99,10,0)'
            }, {
              offset: 1,
              color: 'rgba(208,99,10,0)'
            }], false),
          },
        },
        itemStyle: {
          color: "rgba(208,99,10,0.6)"
        },

        data: ringRatio
      }
    ]
  };
  myChart.setOption(option);
}

buildChart6()
